import React,{useState, useEffect} from 'react';
import {Switch, Route, useParams, useHistory, HashRouter } from 'react-router-dom';
import style from './style.less'
import SongItem from '../../components/SearchResultItems/SongItem';
import SingerItem from '../../components/SearchResultItems/SingerItem';
import SonglistItem from '../../components/SearchResultItems/SonglistItem';
import AlubmItem from '../../components/SearchResultItems/AlbumItem';
import MvItem from '../../components/SearchResultItems/MvItem';

const SearchResult = ()=>{
    const {keywords} = useParams();
    const tabs = [
        {
            id: "1",
            title: "歌曲",
            requestType:1,
            resType:"songs"
        },
        {
            id: "2",
            title: "歌手",
            requestType:100,
            resType:"artists"
        },
        {
            id: "3",
            title: "歌单",
            requestType:1000,
            resType:"songlist"
        },
        {
            id: "4",
            title: "专辑",
            requestType:10,
            resType:"albums"
        },
        {
            id: "5",
            title: "MV",
            requestType:1004,
            resType:"mvs"
        }
    ]
    const [currentTab, setCurrentTab] = useState(null);
    const history = useHistory();
    
    
    // 
    useEffect( async ()=>{
        if(currentTab === null){
            setCurrentTab(tabs[0]);
        }else{
            history.replace(`/searchresult/${currentTab.resType}/${keywords}`);
        }
    },[currentTab])


    const handleClick = (e)=>{
        let id = e.target.id;
        // 移动线条
        moveLine(id)

        // 更新当前tab
        setCurrentTab(getTabObj(id));
    }

    // 移动线条
    const moveLine = (id)=>{
      console.log(id)
        const line = document.getElementById(style.line);
        line.style.left = 23.5 + (id-1)*8 + 'vw';
    }

    // 根据id获取tab对象
    const getTabObj = (id)=>{
        return tabs.filter((item)=>(
            item.id === id
        ))[0]
    }

    return (
        <div className={style.resultPage}>
            <div className={style.tabBar}>
                <ul>
                    {tabs && tabs.map((item,index)=>(
                        <li 
                        className={style.tab} 
                        key={item.id}
                        id={item.id}
                        onClick={handleClick}>
                            {item.title}
                        </li>
                    ))}
                    <p id={style.line}></p>
                </ul>
            </div>
            <div className={style.dataBoard}>
                <HashRouter>
                    <Switch>
                        <Route exact path={`/searchresult/songs/:keywords`} component={SongItem}></Route>
                        <Route exact path={`/searchresult/artists/:keywords`} component={SingerItem}></Route>
                        <Route exact path={`/searchresult/songlist/:keywords`} component={SonglistItem}></Route>
                        <Route exact path={`/searchresult/albums/:keywords`} component={AlubmItem}></Route>
                        <Route exact path={`/searchresult/mvs/:keywords`} component={MvItem}></Route>
                    </Switch>
                </HashRouter>
            </div>
        </div>
    )
}

export default SearchResult;